<template>
  <div>
    <div class="card" v-for="(v, i) in item" :key="i">
      <aside>
        <van-checkbox v-model="checked"></van-checkbox>
      </aside>

      <div>
        <p>
          <span>{{ v.linkMan }}</span> <span> {{ v.mobile }}</span>
        </p>
        <p>{{ v.address }}</p>
      </div>
      <article><van-icon class="icon" name="share" /></article>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  props: {
    item: Object,
  },
  setup(p) {
    let checked = ref(true);
    console.log(p.item);
    return { checked };
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-badge__wrapper {
  color: #fff !important;
  font-size: 27px;
}
::v-deep .van-checkbox__icon--checked .van-icon {
    background-color: #ab2929 ;
    border: 0;
    width: 35px;
    height: 35px;
}
.card {
  width: 100%;
  height: 147px;
  border-bottom: 1px solid rgb(238, 227, 227);
  display: flex;
  align-items: center;
  position: relative;
  background-color: #fff;
  div {
    width: 70%;
    height: 100%;
    p {
      span {
        font-size: 29px;
      }
      &:nth-child(1) {
        margin-bottom: 40px;
        margin-top: 8px;
      }
      &:nth-child(2) {
        font-size: 25px;
        color: #939393;
      }
    }
  }
  aside {
    width: 20%;
    height: 120px;
    line-height: 120px;
    padding-left: 50px;
  }
  article {
    width: 11%;
    position: absolute;
    right: 0;

    .icon {
      color: #999999 !important;
      font-size: 45px;
    }
  }
}
</style>
